<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>我的响应式网站</title>  
    <style>
        .one{
            height: 100px;
            background-color: aqua;
        }
        .one h2 {
            font-weight: 400;
            margin-left: 20px;
            color: gray;
            margin-bottom: 20px;
        }
        a {
            font-size: 18px;
            text-decoration: none;
            color: gray;
        }
        .one .two {
            margin-left: 30px;
        }
        td   {border: 1px solid;
            border-color: #5bc0de;
        }
        p {
            font-size: 30px;
            text-align: center;
            padding-top: 50px;
        }
        .three {
            margin-top: 50px;
        }
        .four .ads {
            width: 500px;
            text-align: center;
            font-size: 18px;
            display: inline-block;
        }
        .four .ads img {
            width:100%;
        }
        .four .lbnc {
            width: 500px;
            text-align: center;
            font-size: 18px;
            display: inline-block;
        }
        .four .lbnc img {
            width: 100%;
        }
        .four .newton {
            width: 500px;
            text-align: center;
            font-size: 18px;
            display: inline-block;
        }
        .four .newton img {
            width: 100%;
        }
        .four .tsl {
            width: 500px;
            text-align: center;
            font-size: 18px;
            display: inline-block;
        }
        .four .tsl img {
            width: 100%;
        }
        .clear {
            clear: both;
        }
        .question {
            display: inline-block;
            font-weight: 400;
        }
    </style>
</head>
<body>
    <div class="one">
        <h2>我的响应式网站</h2>
        <div class="two">
        <a href="#multiply">乘法口诀表</a>
        <a href="#science">科学家介绍</a>
        <a href="#contact">联系我们</a>
        </div>
    </div>

<div class="container-fluid" style="display: block;position: relative">
    <h3 align="center" id="multiply">九九乘法表</h3>
    <div id="99mul">
        <div id="first" style="display: block">
            <script type="text/javascript">
                document.write("<table align='center'>");
                for(a=1;a<=9;a++){
                    document.write("<tr>");
                for(b=1;b<=a;b++){
                    document.write("<td>");
                    document.write("&nbsp"+a+"*"+b+"="+a*b+"&nbsp;&nbsp");
                    document.write("</td>");
                }
                document.write("</tr>")
                }
                document.write("</table>");
            </script>
        </div>
        <div id="second" style="display: none">
            <script type="text/javascript">
                for(let a=1;a<=9;a++){
                    document.write("<table align='center'>");
                    document.write("<tr>");
                    for(let b=1;b<=a;b++){
                        document.write("<td style='text-align: center;column-span: 4'>");
                        document.write("&nbsp"+a+"*"+b+"="+a*b+"&nbsp;&nbsp");
                        document.write("</td>");
                    }
                    document.write("</tr>");
                }
                document.write("</table>");
            </script>
        </div>
        <div align="center">
            <button type="button" class="btn btn-info" onclick="mySwitch()">等腰三角形</button>
            <button type="button" class="btn btn-info" onclick="mySwitch()">直角三角形</button>
            <script type="text/javascript">
                function mySwitch() {
                    if(document.getElementById("first").style.display=="block"){
                        document.getElementById("first").style.display="none"
                        document.getElementById("second").style.display="block"
                    }else {
                        document.getElementById("second").style.display="none"
                        document.getElementById("first").style.display="block"
                    }
                }
            </script>
        </div>
    </div>
</div>

<div class="four">
    <p id="science" >科学家介绍</p>
    <div class="three">
    <div class="ads">
        <img src="../images/ads.jpg"/>
        托马斯·阿尔瓦·爱迪生出生于美国俄亥俄州米兰镇，逝世于美国新泽西州西奥兰治。世界著名的发明家、物理学家、企业家，拥有众多知名重要的发明专利超过2000项，被传媒授予“门洛帕克的奇才”称号。爱迪生是人类历史上第一个利用大量生产原则和电气工程研究的实验室来进行从事发明专利而对世界产生深远影响的人。他发明的留声机、电影摄影机和电灯对世界有极大影响。 他拥有超过2000项发明，包括对世界极大影响的留声机、电影摄影机、钨丝灯泡等。在美国，爱迪生名下拥有1093项专利，而他在英国、法国、德国等地的专利数累计超过1500项。1931年10月18日凌晨3点24分，在美国新泽西西奥兰治的家中逝世，享年84岁。美国《生活》杂志评选出千年来全球最有贡献的一百位人物，发明电灯的美国发明家爱迪生名列榜首。 爱迪生被美国的权威期刊《大西洋月刊》评为影响美国的100位人物第9名。
    </div>
    <div class="lbnc">
        <img src="../images/lbnc.jpg"/>
        戈特弗里德·威廉·莱布尼茨德国哲学家、数学家，历史上少见的通才，被誉为十七世纪的亚里士多德。他本人是一名律师，经常往返于各大城镇，他许多的公式都是在颠簸的马车上完成的，他也自称具有男爵的贵族身份。莱布尼茨在数学史和哲学史上都占有重要地位。在数学上，他和艾萨克·牛顿先后独立发现了微积分，而且他所使用的微积分的数学符号被更广泛的使用，莱布尼茨所发明的符号被普遍认为更综合，适用范围更加广泛。莱布尼茨还发现并完善了二进制。
    </div>
    </div>
    <div class="newton">
        <img src="../images/newton.PNG"/>
        艾萨克·牛顿，爵士，英国皇家学会会长，英国著名的物理学家，百科全书式的“全才”，著有《自然哲学的数学原理》、《光学》。他在1687年发表的论文《自然定律》里，对万有引力和三大运动定律进行了描述。这些描述奠定了此后三个世纪里物理世界的科学观点，并成为了现代工程学的基础。他通过论证开普勒行星运动定律与他的引力理论间的一致性，展示了地面物体与天体的运动都遵循着相同的自然定律；为太阳中心说提供了强有力的理论支持，并推动了科学革命。
    </div>
    <div class="tsl">
        <img src="../images/tsl.jpg"/>
        尼古拉·特斯拉，塞尔维亚裔美籍发明家、物理学家、机械工程师、电气工程师。1856年7月10日，出生于当时奥地利帝国的斯米良。1895年，他替美国尼亚加拉发电站制造发电机组，该发电站至今仍是世界著名水电站之一。1897年，他使马可尼的无线电通信理论成为现实。1898年，他制造出世界上第一艘无线电遥控船，无线电遥控技术取得专利。1899年，他发明了X光（X-Ray）摄影技术。其他发明包括：收音机、传真机、真空管、霓虹灯管、飞弹导航等。以他的名字命名了磁密度单位，表明他在磁学上的贡献。
    </div>
    <div class="clear"></div>
</div>
<div >
    <p id=contact>联系我们</p>
        <h4>联系方式</h4>
        <dd>学校地址：河南省信阳市浉河区金牛山街道南湖路237号</dd>
        <dd>邮政编码：464000</dd>
        <dd>学校网址：http://www.xynu.edu.cn/</dd>
        <dd>学校电话：0376-6392211</dd>
</div>
    <div class="question">
        <h4>在线提问</h4>
        <form >
            姓名：<br>
            <input type="text"> <br>
            电子邮箱：<br>
            <input type="text"> <br>
            内容: <br>
            <input type="text"> <br>
            <input type="submit">
        </form>
    </div>

<script src="../js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>